<!DOCTYPE html>
<html>
    <head>
    <!--
        © Material Theme
        https://github.com/viosey/hexo-theme-material
        Version: 1.2.6 -->

    <!-- Title -->
    
    <title>
        
            reading 《MarkSheet》 | 
        
        sconfield - blog
    </title>

    <!-- Favicons -->
    <link rel="icon shortcut" type="image/ico" href="/img/favicon.png">
    <link rel="icon" sizes="192x192" href="/img/favicon.png">
    <link rel="apple-touch-icon" href="/img/favicon.png">

    <!-- Meta & Info -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#0097A7">
    <meta name="author" content="sconfield">
    <meta name="description" content="reading, coding, loving...">
    <meta name="keywords" content="null">

    <!--iOS -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-title" content="Title">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="480">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="sconfield - blog">

    <!-- The Open Graph protocol -->
    <meta property="og:url" content="http://sconfield.oschina.io">
    <meta property="og:type" content="blog">
    <meta property="og:title" content="reading 《MarkSheet》 | sconfield - blog">
    <meta property="og:description" content="reading, coding, loving...">

    <!--[if lte IE 9]>
        <link rel="stylesheet" href="/css/ie-blocker.css">

        
            <script src="/js/ie-blocker.zhCN.js"></script>
        
    <![endif]-->

    <!-- Import CSS -->
    <link rel="stylesheet" href="/css/material.min.css">
    <link rel="stylesheet" href="/css/style.min.css">
    <!-- Config CSS -->


<!-- Other Styles -->
<style>
    body, html {
        font-family: Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }

    a {
        color: #00838F;
    }

    .mdl-card__media,
    #search-label,
    #search-form-label:after,
    #scheme-Paradox .hot_tags-count,
    #scheme-Paradox .sidebar_archives-count,
    #scheme-Paradox .sidebar-colored .sidebar-header,
    #scheme-Paradox .sidebar-colored .sidebar-badge{
        background-color: #0097A7 !important;
    }

    /* Sidebar User Drop Down Menu Text Color */
    #scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:hover,
    #scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:focus {
        color: #0097A7 !important;
    }

    #post_entry-right-info,
    .sidebar-colored .sidebar-nav li:hover > a,
    .sidebar-colored .sidebar-nav li:hover > a i,
    .sidebar-colored .sidebar-nav li > a:hover,
    .sidebar-colored .sidebar-nav li > a:hover i,
    .sidebar-colored .sidebar-nav li > a:focus i,
    .sidebar-colored .sidebar-nav > .open > a,
    .sidebar-colored .sidebar-nav > .open > a:hover,
    .sidebar-colored .sidebar-nav > .open > a:focus,
    #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a {
        color: #0097A7 !important;
    }

    .toTop {
        background: #757575 !important;
    }

    .material-layout .material-post>.material-nav,
    .material-layout .material-index>.material-nav,
    .material-nav a {
        color: #757575;
    }

    #scheme-Paradox .MD-burger-layer {
        background-color: #757575;
    }

    #scheme-Paradox #post-toc-trigger-btn {
        color: #757575;
    }

    .post-toc a:hover {
        color: #00838F;
        text-decoration: underline;
    }
</style>


<!-- Theme Background Related-->

    <style>
        body{
            background-image: url(/img/bg.png);
        }
    </style>




<!-- Fade Effect -->

    <style>
        .fade {
            transition: all 800ms linear;
            -webkit-transform: translate3d(0,0,0);
            -moz-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            -o-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
            opacity: 1;
        }

        .fade.out{
            opacity: 0;
        }
    </style>


    <script src="/js/jquery.min.js"></script>

    <link rel="stylesheet" href="/css/highlight/solarized-white.css">

    <!-- UC Browser Compatible-->
    <script>
        var agent = navigator.userAgent.toLowerCase();
        if(agent.indexOf('ucbrowser')>0) {
            document.write('<link rel="stylesheet" href="/css/uc.css">');
            alert('由于 UC 浏览器使用极旧的内核，而本网站使用了一些新的特性。\n为了您能更好的浏览，推荐使用 Chrome 或 Firefox 浏览器。');
        }
    </script>

    <!-- Custom Head -->
    
</head>


    
        <body id="scheme-Paradox">
            <div class="material-layout  mdl-js-layout has-drawer is-upgraded">
                

                <!-- Main Container -->
                <main class="material-layout__content" id="main">

                    <!-- Top Anchor -->
                    <div id="top"></div>

                    
                        <!-- Hamburger Button -->
                        <button class="MD-burger-icon sidebar-toggle">
                            <span class="MD-burger-layer"></span>
                        </button>
                    

                    <!-- Post TOC -->

    
    <!-- Back Button -->
    <!--
    <div class="material-back" id="backhome-div" tabindex="0">
        <a class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
           href="#" onclick="window.history.back();return false;"
           target="_self"
           role="button"
           data-upgraded=",MaterialButton,MaterialRipple">
            <i class="material-icons" role="presentation">arrow_back</i>
            <span class="mdl-button__ripple-container">
                <span class="mdl-ripple"></span>
            </span>
        </a>
    </div>
    -->

    <!-- Left aligned menu below button -->
    <button id="post-toc-trigger-btn"
        class="mdl-button mdl-js-button mdl-button--icon">
        <i class="material-icons">format_list_numbered</i>
    </button>

    <ul class="post-toc-wrap mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="post-toc-trigger-btn">
        <ol class="post-toc"><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#Basic"><span class="post-toc-number">1.</span> <span class="post-toc-text">Basic</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#The-Internet"><span class="post-toc-number">1.1.</span> <span class="post-toc-text">The Internet</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#The-World-Wide-Web"><span class="post-toc-number">1.2.</span> <span class="post-toc-text">The World Wide Web</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#A-Web-browser"><span class="post-toc-number">1.3.</span> <span class="post-toc-text">A Web browser</span></a></li></ol></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#HTML-5"><span class="post-toc-number">2.</span> <span class="post-toc-text">HTML 5</span></a></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#CSS-3"><span class="post-toc-number">3.</span> <span class="post-toc-text">CSS 3</span></a></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#SASS"><span class="post-toc-number">4.</span> <span class="post-toc-text">SASS</span></a></li></ol>

        <!--
        <li class="mdl-menu__item">
            Some Action
        </li>
        -->
    </ul>




<!-- Layouts -->

    <!-- Post Module -->
    <div class="material-post_container">

        <div class="material-post mdl-grid">
            <div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col">

                <!-- Post Header(Thumbnail & Title) -->
                
    <!-- Paradox Post Header -->
    
        
            <!-- Random Thumbnail -->
            <div class="post_thumbnail-random mdl-card__media mdl-color-text--grey-50">
            <script>
    var randomNum = Math.floor(Math.random() * 19 + 1);

    $('.post_thumbnail-random').css('background-image', 'url(' + '/img/random/material-' + randomNum + '.png' + ')');
</script>

        
    
            <p class="article-headline-p">
                reading 《MarkSheet》
            </p>
        </div>





                
                    <!-- Paradox Post Info -->
                    <div class="mdl-color-text--grey-700 mdl-card__supporting-text meta">

    <!-- Author Avatar -->
    <div id="author-avatar">
        <img src="/img/sconfield.jpg" width="44px" height="44px" alt="Author Avatar"/>
    </div>
    <!-- Author Name & Date -->
    <div>
        <strong>sconfield</strong>
        <span>2月 14, 2017</span>
    </div>

    <div class="section-spacer"></div>

    <!-- Favorite -->
    <!--
        <button id="article-functions-like-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon btn-like">
            <i class="material-icons" role="presentation">favorite</i>
            <span class="visuallyhidden">favorites</span>
        </button>
    -->

    <!-- Qrcode -->
    

    <!-- Tags (bookmark) -->
    
    <button id="article-functions-viewtags-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
        <i class="material-icons" role="presentation">bookmark</i>
        <span class="visuallyhidden">bookmark</span>
    </button>
    <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-functions-viewtags-button">
        <li class="mdl-menu__item">
        <a class="post_tag-link" href="/tags/css/">css</a></li><li class="mdl-menu__item"><a class="post_tag-link" href="/tags/english/">english</a></li><li class="mdl-menu__item"><a class="post_tag-link" href="/tags/html/">html</a></li><li class="mdl-menu__item"><a class="post_tag-link" href="/tags/read/">read</a>
    </ul>
    

    <!-- Share -->
    <button id="article-fuctions-share-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
    <i class="material-icons" role="presentation">share</i>
    <span class="visuallyhidden">share</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-fuctions-share-button">
    

    
        
            <!-- Busuanzi Views -->
            <a class="post_share-link" href="#">
                <li class="mdl-menu__item">
                    <span id="busuanzi_container_page_pv">
                        <span id="busuanzi_value_page_pv"></span>&nbsp;浏览量
                    </span>
                </li>
            </a>
        
    

    <!-- Share Weibo -->
    
        <a class="post_share-link" href="http://service.weibo.com/share/share.php?appkey=&title=reading 《MarkSheet》&url=http://sconfield.oschina.io//2017/02/14/read-《MarkSheet》/index.html&pic=&searchPic=false&style=simple" target="_blank">
            <li class="mdl-menu__item">
                分享到微博
            </li>
        </a>
    

    <!-- Share Twitter -->
    
        <a class="post_share-link" href="https://twitter.com/intent/tweet?text=reading 《MarkSheet》&url=http://sconfield.oschina.io//2017/02/14/read-《MarkSheet》/index.html&via=sconfield" target="_blank">
            <li class="mdl-menu__item">
                分享到 Twitter
            </li>
        </a>
    

    <!-- Share Facebook -->
    
        <a class="post_share-link" href="https://www.facebook.com/sharer/sharer.php?u=http://sconfield.oschina.io//2017/02/14/read-《MarkSheet》/index.html" target="_blank">
            <li class="mdl-menu__item">
                分享到 Facebook
            </li>
        </a>
    

    <!-- Share Google+ -->
    
        <a class="post_share-link" href="https://plus.google.com/share?url=http://sconfield.oschina.io//2017/02/14/read-《MarkSheet》/index.html" target="_blank">
            <li class="mdl-menu__item">
                分享到 Google+
            </li>
        </a>
    

    <!-- Share LinkedIn -->
    
        <a class="post_share-link" href="https://www.linkedin.com/shareArticle?mini=true&url=http://sconfield.oschina.io//2017/02/14/read-《MarkSheet》/index.html&title=reading 《MarkSheet》" target="_blank">
            <li class="mdl-menu__item">
                分享到 LinkedIn
            </li>
        </a>
    

    <!-- Share QQ -->
    
        <a class="post_share-link" href="http://connect.qq.com/widget/shareqq/index.html?site=sconfield - blog&title=reading 《MarkSheet》&summary=reading, coding, loving...&pics=http://sconfield.oschina.io/img/favicon.png&url=http://sconfield.oschina.io/2017/02/14/read-《MarkSheet》/index.html" target="_blank">
            <li class="mdl-menu__item">
                分享到 QQ
            </li>
        </a>
    

    <!-- Share Telegram -->
    
        <a class="post_share-link" href="https://telegram.me/share/url?url=http://sconfield.oschina.io//2017/02/14/read-《MarkSheet》/index.html&text=reading 《MarkSheet》" target="_blank">
            <li class="mdl-menu__item">
                分享到 Telegram
            </li>
        </a>
    
</ul>

</div>

                

                <!-- Post Content -->
                <div id="post-content" class="markdown-Github mdl-color-text--grey-700 mdl-card__supporting-text fade out">
    
        <h1 id="Basic"><a href="#Basic" class="headerlink" title="Basic"></a>Basic</h1><h2 id="The-Internet"><a href="#The-Internet" class="headerlink" title="The Internet"></a>The Internet</h2><p>原来 www 也是子域名，默认为顶级域名多年 orz… 🙃</p>
<ul>
<li>Client and Server</li>
<li>IP Address</li>
<li>Domains</li>
<li>Protocols</li>
<li>URL</li>
</ul>
<p><strong>what???</strong> 1971年能发邮件了，不过，要到1986年才能收到，OMG~</p>
<table>
<thead>
<tr>
<th>Protocol</th>
<th>Used for</th>
<th>Created in</th>
</tr>
</thead>
<tbody>
<tr>
<td>FTP</td>
<td>File transfer</td>
<td>1971</td>
</tr>
<tr>
<td>SMTP</td>
<td>Sending Emails</td>
<td>1971</td>
</tr>
<tr>
<td>IMAP</td>
<td>Receiving Emails</td>
<td>1986</td>
</tr>
<tr>
<td>IRC</td>
<td>Chat</td>
<td>1988</td>
</tr>
<tr>
<td>HTTP</td>
<td>Browsing HTML documents(Webpages)</td>
<td>1989</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>string</th>
<th>mean</th>
</tr>
</thead>
<tbody>
<tr>
<td>http: //</td>
<td>is the Protocol</td>
</tr>
<tr>
<td>sconfield.oschina.io</td>
<td>is the domain</td>
</tr>
<tr>
<td>/2017/02/14/reading-《MarkSheet》/</td>
<td>is the path</td>
</tr>
</tbody>
</table>
<h2 id="The-World-Wide-Web"><a href="#The-World-Wide-Web" class="headerlink" title="The World Wide Web"></a>The World Wide Web</h2><p>哔哔哔哔，Jeremy 很形象的介绍了万维网，那是无所不能的万维网。</p>
<ul>
<li>Web</li>
<li>Webpage</li>
<li>Website</li>
</ul>
<h2 id="A-Web-browser"><a href="#A-Web-browser" class="headerlink" title="A Web browser"></a>A Web browser</h2><p>Notepad++ 和 Sublime Text 都介绍了，居然没有提到 Atom 。</p>
<ul>
<li>HTML documents</li>
<li>HTML source code</li>
<li>List of Web browsers</li>
<li>List of text editors</li>
</ul>
<h1 id="HTML-5"><a href="#HTML-5" class="headerlink" title="HTML 5"></a>HTML 5</h1><ul>
<li>HTML Basics<ul>
<li>HTML Syntax<ul>
<li>原来超文本就是文本链接文本，呵呵哒 😅 。</li>
<li>16 个通用的可选属性</li>
<li>br, img, input 都是 Self-enclosing elements。</li>
</ul>
</li>
<li>Block and Inline<ul>
<li>block<ul>
<li>p</li>
<li>ul, ol</li>
<li>h1…h6</li>
<li>article 居然没见过，赶紧试了一下，是什么东东，没看出来？ 🤔 （靠，原来只是换行了 orz…）</li>
<li>section</li>
<li>blockquote</li>
</ul>
</li>
<li>inline 我就记得 span ，不过 Jeremy 没提<ul>
<li>a</li>
<li>em</li>
<li>strong</li>
<li>q 这个似乎可以多用用</li>
<li>abbr</li>
</ul>
</li>
</ul>
</li>
<li>Hierarchy<ul>
<li>Nesting<ul>
<li>Sir Alex Ferguson once said about Filipo Inzaghi: “That lad must have been born offside.”.（因扎吉在娘胎里就会越位了，哈哈哈哈～Ferguson 😄 ）</li>
</ul>
</li>
<li>Order</li>
<li>Depth 还是不明白 article 的实际用途，完全可以被 div 代替</li>
<li>Block and inline nesting<ul>
<li>block 可以包含所有的元素</li>
<li>inline 只能包含 inline 元素</li>
</ul>
</li>
</ul>
</li>
<li>Semantics<ul>
<li>Structure elements: organizing your page<ul>
<li>header</li>
<li>nav</li>
<li>h1</li>
<li>article</li>
<li>footer</li>
</ul>
</li>
<li>Text elements: defining your content<ul>
<li>p</li>
<li>ul, ol, li</li>
<li>blockquote</li>
</ul>
</li>
<li>Inline elements: distinguishing your text<ul>
<li>strong</li>
<li>em</li>
<li>a</li>
<li>small</li>
<li>abbr</li>
</ul>
</li>
<li>Generic elements<ul>
<li>div</li>
<li>span</li>
</ul>
</li>
<li>Don’t overthink semantics</li>
</ul>
</li>
<li>Formatting<ul>
<li>Line-breaks 用 br 就好了</li>
<li>Tabulations 还可以用 <em>&amp;<em>nbsp;，以前老用这个 😳</em></em></li>
<li>Tree format</li>
<li>Write HTML for you to read<ul>
<li>用 tab 展示层级</li>
<li>block elements tag 对称</li>
<li>inline elements tag 放在同一行（这点一直忽略了 😮 ）</li>
</ul>
</li>
</ul>
</li>
<li>Boilerplate<ul>
<li>Doctype</li>
</ul>
</li>
</ul>
</li>
<li>HTML Content<ul>
<li>Text p, ul[li], ol[li], dl[dt, dd], h1~h6</li>
<li>Inline strong, em, abbr, q</li>
<li>Links anchor, relative, absolute</li>
<li>Images default inline full size</li>
<li>Tables tfoot still appears at the end<ul>
<li>colspan, rowspan</li>
</ul>
</li>
<li>Structure<ul>
<li>Header logo, navigation</li>
<li>Footer links</li>
<li>Main content</li>
<li>Aside additional information</li>
<li>Section group</li>
</ul>
</li>
<li>Forms block<ul>
<li>action</li>
<li>method</li>
<li>inputs text[placeholder], email, password, number, tel</li>
<li>labels for input id or wrapper checkboxes/radio buttons</li>
<li>dropdown multiple</li>
</ul>
</li>
</ul>
</li>
</ul>
<table>
<thead>
<tr>
<th></th>
<th>Have opening and closing tags</th>
<th>Self-enclosing</th>
</tr>
</thead>
<tbody>
<tr>
<td>Block elements</td>
<td>p, ul, ol</td>
<td>none</td>
</tr>
<tr>
<td>Inline elements</td>
<td>a, strong, em</td>
<td>input, br, img</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Structure</th>
<th>Text</th>
<th>Inline</th>
</tr>
</thead>
<tbody>
<tr>
<td>head, h1, h2, h3, nav, footer, article, section</td>
<td>p, ul, ol, li, blockquote</td>
<td>a, strong, em, q, abbr, small</td>
</tr>
</tbody>
</table>
<h1 id="CSS-3"><a href="#CSS-3" class="headerlink" title="CSS 3"></a>CSS 3</h1><ul>
<li>CSS Basics<ul>
<li>CSS Syntax<ul>
<li>who { what: how; }</li>
<li>selector { property: value; }</li>
</ul>
</li>
<li>Selector <strong>tag, classes, ids</strong><ul>
<li>Combining selectors <strong>em.date</strong></li>
<li>Hierarchy selectors <strong>header a</strong></li>
<li>Pseudo-class selectors <strong>:hover</strong></li>
</ul>
</li>
<li>Inheritance <strong>text color, font(family, size, style, weight), line-height</strong></li>
<li>Priority<ul>
<li>#id worth 100</li>
<li>.class worth 10</li>
<li>tag worth 1</li>
</ul>
</li>
<li>Color 145 colors names, rgb, rgba, hsl, hsla, hexadecimal</li>
<li>Size<ul>
<li>px Pixels most common size unit in css.</li>
<li>% Percentages can help set other css properties, like text size.</li>
<li>em for sizing relative to the parent’s font-size value.</li>
<li>rem similar to em to root element’s value.</li>
</ul>
</li>
<li>Reset normalizing.css</li>
</ul>
</li>
<li>Text<ul>
<li>font-family<ul>
<li>group sans-serif, monospace</li>
<li>web-safe fonts Comic Sans MS</li>
</ul>
</li>
<li>font properties size, style, weight, variant</li>
<li>line-height recommended to use a dynamic unitless numbers.<ul>
<li>1.5 is equal to 150%.</li>
</ul>
</li>
<li>font shorthand</li>
<li>text properties<ul>
<li>text-align left, right, center, justify</li>
<li>text-decoration overline, underline, line-through</li>
<li>text-indent 2em or 30px</li>
<li>text-shadow x, y, blur, color</li>
</ul>
</li>
</ul>
</li>
<li>Box Model<ul>
<li>background<ul>
<li>color</li>
<li>image url, linear-gradient, radial-gradient</li>
<li>position left, bottom, center…</li>
<li>repeat repeat-x, repeat-y, no-repeat</li>
</ul>
</li>
<li>display block, inline, inline-block, none<ul>
<li>visibility hidden, invisible</li>
</ul>
</li>
<li>height and width overflow</li>
<li>border<ul>
<li>width style color</li>
<li>top, right, bottom, left</li>
<li>border-bottom, border-bottom-color</li>
</ul>
</li>
<li>padding inner content</li>
<li>margin<ul>
<li>to push away your neighbours</li>
<li>merge with each other</li>
</ul>
</li>
<li>size shorthand wheel</li>
</ul>
</li>
<li>Positioning<ul>
<li>flow<ul>
<li>fluidity width: 100%, word wrap, height: auto</li>
<li>ordering top to bottom</li>
<li>stacking</li>
<li>breaking the flow</li>
</ul>
</li>
<li>position<ul>
<li>static default position</li>
<li>relative to its natural position</li>
<li>absolute the point of reference is the parent element</li>
<li>fixed acts like absolute, fixed on the screen</li>
</ul>
</li>
<li>float clear</li>
</ul>
</li>
<li>Advanced<ul>
<li>pseudo-classes<ul>
<li>:hover, :visited, :focus</li>
<li>:first-child, :last-child, :nth-child(odd/even/2n+1)</li>
</ul>
</li>
<li>gradients<ul>
<li>linear-gradient(to top, 0deg, orange 50%, yellow)</li>
<li>radial-gradient(at top, black, grey)<ul>
<li>closest-side, closest-corner, farthest-side, farthest-corner</li>
</ul>
</li>
</ul>
</li>
<li>transitions<ul>
<li>transition-duration .5s or 500ms</li>
<li>transition-property all someone</li>
<li>transition-timing-function ease, linear, ease-in, ease-out, ease-in-out</li>
<li>transition-delay timeout .5s or 500ms</li>
</ul>
</li>
<li>animations<ul>
<li>@keyframes whatever {}</li>
<li>.selector {animation-name: whatever;}</li>
<li>animation-duration .5s or 500ms</li>
<li>animation-timing-function <a href="http://cubic-bezier.com" target="_blank" rel="external">cubic bezier</a></li>
<li>animation-delay</li>
<li>animation-iteration-count 1 or 0.5 or infinite</li>
<li>animation-direction<ul>
<li>normal 0% -&gt; 100%</li>
<li>reverse 100% -&gt; 0%</li>
<li>alternate 0% -&gt; 100% -&gt; 0%</li>
<li>alternate-reverse 100% -&gt; 0% -&gt; 100%</li>
</ul>
</li>
<li>animation-fill-mode none, forwards, backwards, both</li>
</ul>
</li>
<li>transform<ul>
<li>translate left, top  </li>
<li>rotate 0~360deg</li>
<li>scale 1 or 0.5 or -1</li>
<li>skew 0~360deg</li>
<li>3d functions perspective</li>
</ul>
</li>
<li>responsiveness device, browser, viewport<ul>
<li>@media only, not, and<ul>
<li>min-width</li>
<li>orientation landscape, portrait</li>
<li>min-resolution</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h1 id="SASS"><a href="#SASS" class="headerlink" title="SASS"></a>SASS</h1>
    

    
</div>


                

                <!-- Post Comments -->
                
                    
    <!-- 使用多说评论 -->
    <link rel="stylesheet" href="/css/duoshuo.min.css">
<style>
    #ds-thread #ds-reset .ds-post-button{
        background-color: #0097A7 !important;
    }
    #ds-wrapper #ds-reset .ds-icons-32{
        background-color: #0097A7 !important;
    }
    #ds-reset .ds-highlight {
        color: #0097A7 !important;
    }
</style>
<div id="comments">
    <!-- 多说评论框 start -->
    <div class="ds-thread"
        data-thread-key=""
        data-url="http://sconfield.oschina.io/2017/02/14/read-《MarkSheet》/"
        data-title="reading 《MarkSheet》">
    </div>
    <!-- 多说评论框 end -->
</div>





                
            </div>

            <!-- Post Prev & Next Nav -->
            <nav class="material-nav mdl-color-text--grey-50 mdl-cell mdl-cell--12-col">
    <!-- Prev Nav -->
    
        <a href="/2017/02/15/实现导航界面/" id="post_nav-newer" class="prev-content">
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
                <i class="material-icons">arrow_back</i>
            </button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            新篇
        </a>
    

    <!-- Section Spacer -->
    <div class="section-spacer"></div>

    <!-- Next Nav -->
    
        <a href="/2017/02/13/read-《web-design-in-4-minutes》/" id="post_nav-older" class="next-content">
            旧篇
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
                <i class="material-icons">arrow_forward</i>
            </button>
        </a>
    
</nav>

        </div>
    </div>



                    
                        <!-- Overlay For Active Sidebar -->
<div class="sidebar-overlay"></div>

<!-- Material sidebar -->
<aside id="sidebar" class="sidebar sidebar-colored sidebar-fixed-left" role="navigation">
    <div id="sidebar-main">
        <!-- Sidebar Header -->
        <div class="sidebar-header header-cover" style="background-image: url(/img/sidebar_header.png);">
    <!-- Top bar -->
    <div class="top-bar"></div>

    <!-- Sidebar toggle button -->
    <button type="button" class="sidebar-toggle mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" style="display: initial;" data-upgraded=",MaterialButton,MaterialRipple">
        <i class="material-icons">clear_all</i>
        <span class="mdl-button__ripple-container">
            <span class="mdl-ripple">
            </span>
        </span>
    </button>

    <!-- Sidebar Avatar -->
    <div class="sidebar-image">
        <img src="/img/sconfield.jpg" alt="sconfield's avatar">
    </div>

    <!-- Sidebar Email -->
    <a data-toggle="dropdown" class="sidebar-brand" href="#settings-dropdown">
        isconfield@icloud.com
        <b class="caret"></b>
    </a>
</div>


        <!-- Sidebar Navigation  -->
        <ul class="nav sidebar-nav">
    <!-- User dropdown  -->
    <li class="dropdown">
        <ul id="settings-dropdown" class="dropdown-menu">
            
                <li>
                    <a href="#" target="_blank" title="Email Me">
                        <i class="material-icons sidebar-material-icons sidebar-indent-left1pc-element">email</i>
                        Email Me
                    </a>
                </li>
            
        </ul>
    </li>

    <!-- Homepage -->
    <li id="sidebar-first-li">
        <a href="/" target="_self">
            <i class="material-icons sidebar-material-icons">home</i>
            主页
        </a>
    </li>

    <!-- I'm Feeling Lucky -->
    <!--
    <li class="dropdown">
        <a href="" target="_self">
            <i class="material-icons sidebar-material-icons">explore</i>
             sidebar.imlucky
        </a>
    </li>
    -->

    <!-- Archives  -->
    <li class="dropdown">
        <a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
            <i class="material-icons sidebar-material-icons">inbox</i>
             归档
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li>
            <a class="sidebar_archives-link" href="/archives/2017/03/">三月 2017<span class="sidebar_archives-count">4</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/02/">二月 2017<span class="sidebar_archives-count">11</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/01/">一月 2017<span class="sidebar_archives-count">3</span></a>
        </ul>
    </li>

    <!-- Categories  -->
    
        <li class="dropdown">
            <a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
                <i class="material-icons sidebar-material-icons">chrome_reader_mode</i>
                分类
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li>
                <a class="sidebar_archives-link" href="/categories/coding/">coding<span class="sidebar_archives-count">9</span></a></li><li><a class="sidebar_archives-link" href="/categories/loving/">loving<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/reading/">reading<span class="sidebar_archives-count">8</span></a>
            </ul>
        </li>
    

    <!-- Divider -->
    <li class="divider"></li>


    <!-- Pages  -->
  	
        <li>
            <a href="/about/" title="关于我">
                
                    <i class="material-icons sidebar-material-icons">person</i>
                
                关于我
            </a>
        </li>
  	
        <li>
            <a href="/tags/" title="标签云">
                
                    <i class="material-icons sidebar-material-icons">icon</i>
                
                标签云
            </a>
        </li>
  	

    <!-- Article Numebr  -->
    <li>
        <a href="/archives">
            文章总数
            <span class="sidebar-badge">18</span>
        </a>
    </li>
</ul>


        <!-- Sidebar Divider -->
        <div class="sidebar-divider"></div>

        <!-- Sidebar Footer -->
        <!--
I'm glad you use this theme, the development is no so easy, I hope you can keep the copyright, I will thank you so much.
If you still want to delete the copyrights, could you still retain the first one? Which namely "Theme Material"
It will not impact the appearance and can give developers a lot of support :)

很高兴您使用并喜欢该主题，开发不易 十分谢谢与希望您可以保留一下版权声明。
如果您仍然想删除的话 能否只保留第一项呢？即 "Theme Material"
它不会影响美观并可以给开发者很大的支持和动力。 :)
-->

<!-- Theme Material -->
<a href="https://github.com/viosey/hexo-theme-material"  class="sidebar-footer-text-a" target="_blank">
    <div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
        主题 - Material
        <span class="sidebar-badge badge-circle">i</span>
    </div>
</a>

<!-- Help & Support -->
<!--
<a href="mailto:hiviosey@gmail.com" class="sidebar-footer-text-a">
    <div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
    sidebar.help
    <span class="mdl-button__ripple-container">
      <span class="mdl-ripple"></span>
    </span>
  </div>
</a>
-->

<!-- Feedback -->
<!--
<a href="https://github.com/viosey/hexo-theme-material/issues" target="_blank" class="sidebar-footer-text-a">
    <div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
         sidebar.feedback
                    <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></div>
</a>
-->

<!-- Abount Theme -->
<!--
<a href="https://blog.viosey.com/index.php/Material.html" target="_blank" class="sidebar-footer-text-a">
    <div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
         sidebar.about_theme
        <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></div>
</a>-->

    </div>

    <!-- Sidebar Sponsor -->
    
    <div id="upyun-logo">
        <a href="https://www.upyun.com/" target="_blank">
            <img src="/img/upyun_logo.png" alt="upyun_league">
        </a>
    </div>


</aside>

                    

                    
                        <!-- Footer Top Button -->
                        <div class="toTop-wrap">
    <a href="#top" class="toTop">
        <i class="material-icons footer_top-i">expand_less</i>
    </a>
</div>

                    

                    <!--Footer-->
<footer class="mdl-mini-footer" id="bottom">
    
        <!-- Paradox Footer Left Section -->
        <div class="mdl-mini-footer--left-section sns-list">
    <!-- Twitter -->
    

    <!-- Facebook -->
    
        <a href="https://www.facebook.com/isconfield" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(/img/footer/footer_ico-facebook.png);">
                <span class="visuallyhidden">Facebook</span>
            </button><!--
     --></a>
    

    <!-- Google + -->
    

    <!-- Weibo -->
    

    <!-- Instagram -->
    
        <a href="https://www.instagram.com/jingjingbook" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(/img/footer/footer_ico-instagram.png);">
                <span class="visuallyhidden">Instagram</span>
            </button><!--
     --></a>
    

    <!-- Tumblr -->
    

    <!-- Github -->
    
        <a href="https://github.com/sconfield" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(/img/footer/footer_ico-github.png);">
                <span class="visuallyhidden">Github</span>
            </button><!--
     --></a>
    

    <!-- LinkedIn -->
    

    <!-- Zhihu -->
    

    <!-- Bilibili -->
    

    <!-- Telegram -->
    
</div>


        <!--Copyright-->
        <div id="copyright">
            Copyright&nbsp;©&nbsp;
            <script type="text/javascript">
                var fd = new Date();
                document.write(fd.getFullYear());
            </script>
            &nbsp;sconfield - blog
        </div>

        <!-- Paradox Footer Right Section -->

        <!--
        I am glad you use this theme, the development is no so easy, I hope you can keep the copyright.
        It will not impact the appearance and can give developers a lot of support :)

        很高兴您使用该主题，开发不易，希望您可以保留一下版权声明。
        它不会影响美观并可以给开发者很大的支持。 :)
        -->

        <div class="mdl-mini-footer--right-section">
            <div>
                <div class="footer-develop-div">Powered by <a href="https://hexo.io" target="_blank" class="footer-develop-a">Hexo</a></div>
                <div class="footer-develop-div">Theme - <a href="https://github.com/viosey/hexo-theme-material" target="_blank" class="footer-develop-a">Material</a></div>
            </div>
        </div>
    
</footer>


                    <!-- Import File -->
<script src="/js/highlight.min.js"></script>
<script src="/js/js.min.js"></script>
<script src="/js/nprogress.js"></script>

<script type="text/javascript">
    NProgress.configure({
        showSpinner: true
    });
    NProgress.start();

    $('#nprogress .bar').css({
        'background': '#FF4081'
    });
    $('#nprogress .peg').css({
        'box-shadow': '0 0 10px #FF4081, 0 0 15px #FF4081'
    });
    $('#nprogress .spinner-icon').css({
        'border-top-color': '#FF4081',
        'border-left-color': '#FF4081'
    });

    setTimeout(function() {
        NProgress.done();
        $('.fade').removeClass('out');
    }, 800);
</script>







    <!-- Busuanzi -->
    <script src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>



    <!-- 多说公共 js 代码 start -->
    <script type="text/javascript">
        var duoshuoQuery = {
            short_name: 'isconfield'
        };
        (function() {
            var ds = document.createElement('script');
            ds.type = 'text/javascript';
            ds.async = true;
            ds.src = 'https://static.duoshuo.com/embed.js';
            ds.charset = 'UTF-8';
            (document.getElementsByTagName('head')[0]
             || document.getElementsByTagName('body')[0]).appendChild(ds);
        })();
    </script>
    <!-- 多说公共 js 代码 end -->





<!-- Swiftye -->


<!-- Local Search-->


<!-- Window Load-->
<script>
    $(window).load(function() {
        // Post_Toc parent position fixed
        $('.post-toc-wrap').parent('.mdl-menu__container').css('position', 'fixed');
    });
</script>

<!-- MathJax Load-->


                </main>
            </div>
        </body>
    
</html>
